<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :headers="headers"
      list-type="picture-card"
      :show-file-list="false"
      accept=".mp4, .ogg, .flv, .avi, .wmv, .rmvb, .mov"
      :action="$uploadPath"
      :before-upload="beforeUploadVideo"
      :on-progress="uploadVideoProcess"
      :on-success="handleImageSuccess"
    >
      <video
        v-if="imageUrl.length > 1 && !videoFlag"
        v-bind:src="$downPath + imageUrl"
        class="avatar video-avatar video"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i v-else class="el-icon-plus avatar-uploader-icon" />
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        v-bind:percentage="videoUploadPercent"
        style="margin-top: 7px"
      ></el-progress>
    </el-upload>
    <p class="Upload_pictures">
      <span></span>
      <span>最多可以上传1个视频，建议最大不超过10M，推荐格式mp4</span>
    </p>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadVideo',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      tempUrl: ''
    }
  },
  computed: {
    imageUrl() {
      return this.value
    },
    headers() {
      return {
        'Authorization': 'Bearer ' + getToken()
      }
    }
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 20;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
        this.error('请上传正确的视频格式')
        return false;
      }
      if (!fileSize) {
        this.error("视频大小不能超过20MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess(res, file, fileList) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if (res.code === '0') {
        this.emitInput(res.data.url)
      }
    }
  }
}
</script>
<style>
.video {
  width: 148px;
  height: 148px;
}
</style>
